<template>
  <div class="signResult">
    <div class="sta_title">
      <div class="goBack" @click="save">
        <Icon type="ios-arrow-back"/>
        <span class="gb_font">返回</span></div>
      <div class="st_font">
        <span class="stf_title">{{signData.isHand?'会签结果':'审批结果'}}</span>
      </div>
    </div>
    <div class="content">
      <div class="title">{{signData.isHand?'会签结果':'审批结果'}}</div>
      <div class="lists">
        <div class="con" v-for="(item,index) in list" :key="index">
          <div class="con_top">
            <div class="ct_left">
              <span class="name" v-if="item.name != undefined">{{item.name}}</span>
              <span class="name" v-else>{{item.agree_name}}</span>
              <span class="time">{{item.agree_time}}</span>
            </div>
            <div :class="{'ct_right noOperation': item.status == 0,'ct_right agree': item.status == 1,'ct_right disAgree': item.status == -1}">{{item.status == 0?'未审核':item.status == 1? '同意': "驳回"}}</div>
          </div>
          <div class="con_bottom" v-html="item.cont" v-if="item.cont != ''"></div>
          <div class="con_bottom nullCB" v-else>暂无会签意见</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import cookie from 'js-cookie';
  export default {
    name: "signResult",
    props: ['signData'],
    data() {
      return {
        list: [],
      }
    },
    created() {
      let self = this
      self.getInfo()
    },
    methods: {
      save() {
        let self = this
        this.$emit('save', 1)
      },
      getInfo(){
        let self = this
        this.$Loading.start();
        let str = {
          problem_id: self.signData.problem_id,
          step: self.signData.step,
          uid: cookie.get('uid')
        }
        let url = ''
        if (self.signData.isHand){
          url = '/item/trialslist'
        } else {
          url = '/item/modifylist'
        }
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + url, {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          self.list = res.data.list
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    }
  }
</script>

<style scoped lang="less">
  .signResult {
    width: 79%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 0;
    opacity: 10;
    background: #f4f4f4;
    padding: 0 16px;
    box-sizing: border-box;
    .sta_title {
      display: flex;
      flex-direction: row;
      justify-content: center;
      position: relative;
      margin: 16px 0;
      width: 100%;
      height: 36px;
      line-height: 36px;
      .goBack {
        display: flex;
        flex-direction: row;
        position: absolute;
        left: 0;
        top: 0;
        cursor: pointer;
        .ivu-icon {
          font-size: 20px;
          line-height: 36px;
        }
        .gb_font {
          font-size: 17px;
          color: #666666;
          line-height: 37px;
        }
      }
      .st_font {
        display: flex;
        flex-direction: row;
        .stf_title {
          font-size: 17px;
          color: #222222;
          margin-left: 50px;
          margin-right: 50px;
        }
      }
    }
    .content{
      width: 100%;
      background: #f9f9f9;
      border-radius: 5px;
      border: 1px solid #e1e1e1;
      display: flex;
      flex-direction: column;
      .title{
        padding: 16px;
        box-sizing: border-box;
        font-size: 16px;
        color: #222222;
        border-bottom: 1px solid #e1e1e1;
        background: #fff;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
      .lists{
        padding: 16px;
        padding-top: 0;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .con{
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          background: #fff;
          padding: 16px;
          border: 1px solid #e1e1e1;
          border-radius: 5px;
          margin-top: 16px;
          .con_top{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-bottom: 10px;
            .ct_left{
              display: flex;
              flex-direction: row;
              .name{
                font-size: 15px;
                line-height: 20px;
                color: #333333;
                margin-right: 10px;
              }
              .time{
                font-size: 12px;
                line-height: 20px;
                color: #999999;
              }
            }
            .ct_right{
              font-size: 14px;
              line-height: 20px;
            }
            .noOperation{
              color: #999999;
            }
            .agree{
              color: #56b44a;
            }
            .disAgree{
              color: #fff;
              background: #dc4444;
              padding: 0px 5px;
              height: 20px;
              border-radius: 3px;
            }
          }
          .con_bottom{
            font-size: 14px;
            color: #666666;
          }
          .nullCB{
            font-size: 14px;
            color: #cccccc;
          }
        }
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .signResult{
      width: 100% !important;
      padding: 0 8px !important;
      .title{
        padding: 8px !important;
        margin-bottom: 8px !important;
      }
    }
  }
</style>